<template>
    <div class="user">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 表格 -->
        <el-table :data="roles" border center style="width: 70% ;margin-top: 15px;">
            <el-table-column type="index"  width="150" >
            </el-table-column>
            <el-table-column prop="authName" label="角色" width="280">
            </el-table-column>
            <el-table-column prop="path" label="路径" width="280">
            </el-table-column>
            <el-table-column  label="等级">
                <template slot-scope="scope">
                    {{scope.row.level | levelformat}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { getALRrights } from '@/api/index.js'
export default {
  data () {
    return {
      roles: [],
      level: ''
    }
  },
  filters: {
    levelformat (level) {
      if (level === '0') {
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else if (level === '2') {
        return '三级'
      } else {
        return ''
      }
    }
  },
  mounted () {
    // 1.4.1角色列表
    getALRrights('list').then(res => {
      console.log(res)
      this.roles = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
/* 覆盖element导航菜单的样式 */
.el-breadcrumb {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
  margin-bottom: 15px;
}
</style>
